<template>
    <div class="box">
      <div class="block">
        <el-image :src="src" object-fit="contain"></el-image>
      </div>
      <div class="goods">
        <div class="goodstitle">
            <i class="el-icon-s-goods"></i>
            <span>产品基本信息</span>
        </div>
                <div class="goodinfo">
                    <div>
                        <i class="el-icon-collection-tag"></i>
                        <span>产品名称：</span>
                        <span>盐焗乳鸽</span>
                    </div >
                    <div class="good">
                        <i class="el-icon-coin"></i>
                        <span>产品等级：</span>
                        <span>一等品</span>
                    </div>
                    <div class="good">
                        <i class="el-icon-box"></i>
                        <span>产品原料：</span>
                        <span>肉鸽</span>
                    </div>
                    <div class="good">
                        <i class="el-icon-menu"></i>
                        <span>产品品类：</span>
                        <span>肉鸽</span>
                    </div>
                    <div class="good">
                        <i class="el-icon-time"></i>
                        <span>保 质 期：</span>
                        <span>180天（冷冻）</span>
                    </div>
                </div>  
        
      </div>
              <div class="border"></div>
                <div class="sku">
                    <div class="skutitle"><i class="el-icon-s-order" style="color:#67C23A;"></i><span>投入品溯源</span></div>
                    <div class="table">
                        <el-table
                        size="medium"
                        fit
                        :data="tableData"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                        >
                        <el-table-column type="expand" size="small">
                            <template >
                                <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="基地:">
                                    <span>羊岭村养殖基地</span>
                                </el-form-item>
                                <el-form-item label="投入品所属仓库:">
                                    <span>饲料仓库A</span>
                                </el-form-item>
                                <el-form-item label="投入品sku：" >
                                    <span>00001</span>
                                </el-form-item>
                                <el-form-item label="投入品数量：">
                                    <span>1</span>
                                </el-form-item>
                                <el-form-item label="投入品规格：">
                                    <span>50kg/包}</span>
                                </el-form-item>
                                <el-form-item label="操作人：">
                                    <span>管理员1</span>
                                </el-form-item>
                                <el-form-item label="投入品供应商：">
                                    <span>中粮饲料(佛山)有限公司</span>
                                </el-form-item>
                                <el-form-item label="区块链高度：">
                                    <span>1.5</span>
                                </el-form-item>
                                <el-form-item label="区块链存证ID：">
                                    <span>T4hHsg5jyacC6ErVwNg8LntsYj3u5V8lLXl+aYtffskrDI</span>
                                </el-form-item>
                                </el-form>
                            </template>
                            </el-table-column>
                        <el-table-column
                        prop="name"
                        label="操作名称"
                        width="100"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="投入品名称"
                        :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                        prop="date"
                        label="日期"
                        sortable
                        width="100"
                        >
                        </el-table-column>
                    </el-table>
                    
                </div>
                    <div class="more"><span @click="golist">点击查看更多</span></div>
                </div>
                <div class="border"></div>
                <!-- <div class="out"> -->
                    <div class="outtitle">
                        <i class="el-icon-time" style="color:#67C23A;"></i>
                        <span>出栏日期：</span>
                        <span>2021.05.10</span>
                    </div>
                    <!-- <div class="date"></div> -->
                <!-- </div> -->
                <div class="border"></div>
                  <div class="company">
                        <div class="companytitle">
                            <i class="el-icon-s-goods"></i>
                            <span>企业基本信息</span>
                        </div>
                            <div class="companyinfo">
                                <div>
                                    <i class="el-icon-office-building"></i>
                                    <span>企业名称：</span>
                                    <span>梅州市金绿食品有限公司</span>
                                </div >
                                <div class="companyitem">
                                    <i class="el-icon-menu"></i>
                                    <span>经营类型：</span>
                                    <span>加工企业</span>
                                </div>
                                <div class="companyitem">
                                    <i class="el-icon-location"></i>
                                    <span>经营地址：</span>
                                    <span>广东省梅州市金绿现代农业发展有限公司</span>
                                </div>
                            </div>  
                  </div>
                  <div class="border"></div>
                  <div class="foot">
                      <span>图片仅供参考，请以实物为准</span>
                      <span>您查询的信息为该产品最新批次追溯信息,如有疑问可联系本店相关工作人员!</span>
                  </div>
                  <div class="border"></div>
                  <div class="border"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
          date: '2016-05-01',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-02',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-02',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-05',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }],
            src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1385146130,1433869898&fm=26&gp=0.jpg"
        }
    },
    methods:{
        golist(){
            this.$router.push("/list")
        },
    }
}
</script>

<style lang="scss" scoped>
.box{
    // background-color: rgba(49, 49, 49, 0.144);
    height: 100%;
    width: 100%;
    .goods{
        // background-color: rgba(255, 255, 255, 0.034);
        i{
             color:#67C23A;
        }
        .goodstitle{
           border-bottom:1px solid rgba(0, 0, 0, 0.349);
            padding-left: 10px;
            margin-top: 10px;
            font-size: 13px;
            line-height: 25px;
            }
        .goodinfo{
           margin: 5px 10px 5px 10px;
            padding-left: 15px;
            font-size: 13px;
            color: rgba(22, 22, 22, 0.692);
            line-height: 28px;
            .good{
               border-top:1px solid rgba(0, 0, 0, 0.116);
            }
        }
     
    }
    .sku{
        width: 100%;
        .skutitle{
            padding: 10px 0px 0px 10px;
            font-size: 15px;
            line-height: 25px;
            border-bottom:0.5px solid rgba(0, 0, 0, 0.438);
        }
        .tabel{
            // width: 355px;
            // height: 300;
           height: auto;
        }
        .more{
                width: 100%;
                height: 30px;
                text-align: center;
                font-size: 15px;
                line-height: 30px;
                color: rgba(20, 19, 19, 0.521);
                }
    }
    .border{
            height: 10px;
            width: 100%;
            background-color: rgba(20, 22, 22, 0.103);
        }
        // .out{
            .outtitle{
             padding: 7px 0px 5px 10px;
            font-size: 15px;
            line-height: 25px;
            color: rgba(20, 19, 19, 0.801);
            span:nth-child(3){
				margin-left: 10px;
                color: rgba(20, 19, 19, 0.678);
                font-size: 16px;
                font-weight: 900;
			}
        // }
        // .date{
        //     width: 100%;
        //         height: 30px;
        //         text-align: center;
        //         font-size: 20px;
        //         line-height: 40px;
        //         color: rgba(20, 19, 19, 0.849);
        // }
    }
    .company{
        i{
                color:#67C23A;
            }
        .companytitle{
            border-bottom:1px solid rgba(0, 0, 0, 0.349);
            padding-left: 10px;
            margin-top: 10px;
            font-size: 13px;
            line-height: 25px;
            
        }
        .companyinfo{
            margin: 5px 10px 5px 10px;
            padding-left: 15px;
            font-size: 13px;
            color: rgba(22, 22, 22, 0.692);
            line-height: 30px;
            .companyitem{
                border-top:1px solid rgba(0, 0, 0, 0.116);
            }
        }
    }
    .foot{
        // height: auto;
        padding:  10px 60px;
        display: flex;
        justify-content:center;
        flex-wrap: wrap;
        text-align: center;
        line-height: 18px;
        font-size: 2px;
    }
}
</style>